<template>
  <div class="multiple-choice">
    <v-row no-gutters class="d-flex justify-space-between mt-3">
      <v-col cols="3" class="d-flex">
        <v-icon size="18" class="mr-2">mdi-drag-vertical</v-icon>
        <p class="label">1</p>
        <v-row no-gutters>
          <v-col cols="6">
            <v-select
              hide-details
              dense
              height="24"
              :items="items"
              class="white-input"
            ></v-select>
          </v-col>
          <v-col cols="5" class="d-flex">
            <p class="label">Width</p>
            <v-text-field
              hide-details
              dense
              class="white-input text-center"
            ></v-text-field>
            <p class="label">%</p>
          </v-col>
        </v-row>
      </v-col>
      <v-col cols="4" class="d-flex justify-end">
        <v-switch
          inset
          label="Can not be modified"
          class="on-off"
          hide-details
        ></v-switch>
        <v-switch inset label="Required" class="on-off" hide-details></v-switch>
        <v-icon class="icon"> mdi-delete </v-icon>
        <v-icon class="icon copy"> mdi-file-multiple </v-icon>
      </v-col>
    </v-row>
    <v-row no-gutters class="mt-3">
      <v-col cols="6" class="pl-7">
        <v-text-field
          hide-details
          dense
          class="white-input text-center"
        ></v-text-field>
      </v-col>
      <v-col cols="5">
        <v-row no-gutters>
          <v-col cols="6" class="d-flex pl-3">
            <p class="label">Minimum width</p>
            <v-text-field
              hide-details
              dense
              class="white-input text-center"
            ></v-text-field>
            <p class="label">pixel</p>
          </v-col>
          <v-col cols="6" class="d-flex pl-3">
            <p class="label">Maximum width</p>
            <v-text-field
              hide-details
              dense
              class="white-input text-center"
            ></v-text-field>
            <p class="label">pixel</p>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
    <v-row no-gutters class="mt-3">
      <v-col cols="1">1</v-col>
      <v-col cols="11">
        <v-row no-gutters>
          <v-col cols="10" class="d-flex">
            <v-icon size="24">mdi-drag-vertical</v-icon>
            <v-text-field hide-details dense class="white-input"></v-text-field>
          </v-col>
          <v-col cols="1" class="d-flex">
            <v-checkbox
              hide-details
              dense
              label="remarks"
              class="check ml-2"
            ></v-checkbox>
            <v-icon size="18" class="mt-2 ml-3"> mdi-minus-circle </v-icon>
          </v-col>
        </v-row>
        <v-row no-gutters class="pr-6">
          <v-col cols="12" class="d-flex">
            <v-icon size="16" class="mr-3 ml-1" color="#EB9B31">
              mdi-plus-box
            </v-icon>
            <p class="label">New Options</p>
            <v-divider></v-divider>
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Drag from "@/components/JobSheet/Drag/Drag.vue";
@Component({
  components: {
    Drag,
  },
})
export default class MultipleChoice extends Vue {
  items = ["Foo", "Bar", "Fizz", "Buzz"];
}
</script>

<style lang="scss" scoped>
@import "./MultipleChoice.scss";
</style>
